<template>
  <div>
    <div class="first">
      <!-- 标题栏 -->
      <van-nav-bar class="nav" title="美 味 餐 厅">
        <template #right>
          <van-icon name="medal-o" size="30" />
        </template>
      </van-nav-bar>
      <!-- 轮播图 -->
      <van-swipe class="mySwipe" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(v, i) in imgs" :key="i">
          <img :src="`/img/${v}`" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="second">
        <!-- 菜品列表 -->
      <van-pull-refresh @refresh="onRefresh" v-model="refreshing" success-text="刷新成功" success-duration="500">  
        <DishItem
          v-for="item in dishList"
          :key="item.dishId"
          :dish="item"
          @click="dishDetail(item.dishId)"
      ></DishItem>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted,ref,watch } from "vue";
import { useRouter } from "vue-router";
import DishItem from "@/components/DishItem.vue";
import $http from "@/http";
import dish from "@/types/dish";
// 路由管理器
const router = useRouter();
//轮播图
const imgs = reactive(["1.jpg", "7.jpg", "16.jpg", "3.jpg", "2.jpg", "13.jpg"]);
// 菜单列表
const dishList: dish[] = reactive([]);
// 下拉刷新
const refreshing=ref(false)
const onRefresh=()=>{
  // 加载菜单列表
  $http.dishApi
    .queryAll()
    .then((res) => {
      //console.log(res);
      dishList.length = 0;
      dishList.push(...res.data.data);
      refreshing.value=false
    })
    .catch((err) => console.log(err));
}
onMounted(() => {
  // 加载菜单列表
  $http.dishApi
    .queryAll()
    .then((res) => {
      //console.log(res);
      dishList.length = 0;
      dishList.push(...res.data.data);
    })
    .catch((err) => console.log(err));
});
const dishDetail = (id: number) => {
  router.push("/home/detail?dishId=" + id);
};
</script>

<style lang="scss" scoped>
  .first{
    z-index: 100;
    position: fixed;
    width: 100%;
    >.mySwipe{
      width: 100%;
      
    }
  }
  .second{
    padding-top:240px;
    padding-bottom: 60px;
  }
</style>

<style lang="scss" >
:root {
  --van-nav-bar-background: #07c160;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-height: 70px;
  --van-nav-bar-icon-color: red;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-z-index: 100;
}
.mySwipe .van-swipe-item {
  display: flex;
  justify-content: center;
  img {
    width: 100%;
    height: 150px;
    line-height: 150px;
  }
}
</style>